<!-- 
    说明：招聘企业-企业详情
 -->
<template>
  <div>
    <PageCom class="pc_show_page">
      <section class="pc-review-page">
        <div class="nav-com">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'hire' }">
              招聘专区
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{ $route.meta.title || "--" }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 公司基本信息  -->
        <div class="company-info">
          <img class="logo" v-if="companyInfo.companyLogo" :src="companyInfo.companyLogo" v-imgError alt="logo" />
          <img v-else class="logo" src="../../assets/images/logo_demo.png" v-imgError alt="logo" />
          <div class="right-block">
            <div class="name">{{ companyInfo.companyName }}</div>
            <div class="area">
              {{ companyInfo.industry }}
              <div class="collectStatus" @click="changeCollectStatus">
                <img src="../../assets/images/collection.png" v-if="!collectStatus" />
                <img src="../../assets/images/collection_active.png" v-else />
                <span v-if="!collectStatus">收藏</span>
                <span v-else style="color: #fc9c21">收藏中</span>
              </div>
            </div>
          </div>
          <div class="right-hire">
            <div class="hire-num">{{ companyInfo.recruitmentCount || 0 }}</div>
            <div class="hire-title">在招职位</div>
            <div class="btn" @click="linkTo('resumeEdit')">
              <span class="edit-icon"></span>
              {{ curriculumId ? "修改简历" : "填写简历" }}
            </div>
            <div class="click-num">点击量：{{ companyInfo.clickCount || 0 }}</div>
          </div>
          <div class="tag">
            <span :class="['item', { current: tagType === 0 }]" @click="tagType = 0">企业介绍</span>
            <span :class="['item', { current: tagType === 1 }]" @click="tagType = 1">在招职位</span>
          </div>
        </div>
        <div class="t_btn" @click="linkTo('resumeEdit')">
          <span class="edit-icon"></span>
          {{ curriculumId ? "修改简历" : "填写简历" }}
        </div>
        <section v-show="tagType === 0">
          <!-- 热招职位 -->
          <div class="row-item">
            <div class="title">
              热招职位
              <div class="all" @click="tagType = 1">
                <span class="all-icon"></span>查看全部职位
              </div>
            </div>
            <div style="display: flex; overflow-x: scroll;" v-if="Array.isArray(shortJobList) && shortJobList.length">
              <div style="" v-for="(item, index) in shortJobList" :key="index">
                <div class="job-item" @click="linkToJobDetail(item.id)">
                  <div class="row1">
                    <div class="job-name">
                      {{ item.jobName }}
                    </div>
                    <div class="salary">
                      {{ item.lowestSalary + "-" + item.highestSalary }}元/天
                    </div>
                  </div>
                  <div class="other">
                    <span>{{ item.workPeriod }} </span>
                    <span class="line"></span>
                    <span>{{ item.practicePeriod }}个月 </span>
                    <span class="line"></span>
                    <span>{{ item.education }} </span>
                    <span class="line"></span>
                    <span>{{ ["在校", "应届"][item.identify] }}</span>
                    <span class="line"></span>
                    <span>{{ item.city }} </span>
                  </div>
                </div>
              </div>
            </div>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
          <!-- 平台简介 -->
          <div class="row-item">
            <div class="title">{{ companyInfo.companyName }}简介</div>
            <div class="company-desc" v-if="companyInfo.introduction"
              v-html="companyInfo.introduction.replace(/\n/gm, '<br>')"></div>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
          <!-- 企业环境 -->
          <div class="row-item">
            <div class="title">企业环境</div>
            <div class="company-environment swiper" id="mySwiper" v-if="Array.isArray(imgVideoList) && imgVideoList.length">

              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in imgVideoList" :key="index">
                  <div class="t_swiper_item" style=" ">
                    <el-image class="t_swiper_img" :src="item.url" alt="" v-if="item.type == 'img'"
                      :preview-src-list="imgList.src" fit="cover" style="" />
                    <vueVideoPlayer v-else :src="item.url" :ref="`video${index}`" @onPlay="videoPlay(index)" />
                    <div v-if="item.updateTime" style="
                          text-align: right;
                          font-size: 12px;
                          color: #9597a0;
                          margin-bottom: 20px;
                        ">
                      更新时间：{{ item.updateTime }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-button-prev" @click.stop="slidePrev"></div>
              <div class="swiper-button-next" @click.stop="slideNext"></div>
            </div>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
          <!-- 企业地址 -->
          <div class="row-item">
            <div class="title">企业地址</div>
            <div class="company-address" v-if="
              companyInfo.companyAddress &&
              companyInfo.companyAddress.length > 0
            ">
              <div class="item" :key="index" v-for="(item, index) in companyInfo.companyAddress">
                <span class="position-icon"></span>
                {{ item.province !== item.city ? item.province : "" }}
                {{ item.city }}
                {{ item.address }}
              </div>
            </div>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
        </section>
        <section v-show="tagType === 1">
          <!-- 搜索工作栏 -->
          <el-form style="margin: 22px 0 0" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item prop="status">
              <i class="condition-icon"></i>
              <el-cascader size="mini" v-model="queryParams.city" :show-all-levels="false" :options="provinceAndCityData"
                :props="{ value: 'label' }" placeholder="工作城市"></el-cascader>
            </el-form-item>
            <el-form-item prop="companyName">
              <el-select size="mini" v-model="queryParams.studentType" placeholder="招聘对象" clearable>
                <el-option v-for="dict in studentType" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="status">
              <el-select size="mini" v-model="queryParams.education" placeholder="学历要求" clearable>
                <el-option v-for="dict in educationOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="danger" @click="resetQuery">重置</el-button>
              <el-button size="mini" type="primary" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form>
          <section class="job-list">
            <el-empty description="暂无相关职位" v-if="jobList.length <= 0"></el-empty>
            <div class="item" :key="index" @click="linkToJobDetail(item.id)" v-for="(item, index) in jobList">
              <div class="job-name">
                {{ item.jobName }} <span class="city">{{ item.city }}</span>
              </div>
              <div class="other">
                {{ item.workPeriod }} <span class="line"></span>
                {{ item.practicePeriod }}个月<span class="line"></span>
                {{ item.lowestSalary + "-" + item.highestSalary }}元/天
                <span class="line" v-if="item.education"></span>
                {{ item.education ? item.education : "" }}
                <span class="line" v-if="item.identify"></span>
                {{ item.identify ? ["在校", "应届"][item.identify] : "" }}
              </div>
              <div class="btn">职位详情</div>
            </div>
          </section>
          <!-- 分页组件 -->
          <el-pagination v-if="total > 0" class="bottom-page" background layout="prev, pager, next" :total="total"
            :page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 40, 50]" @size-change="pagesizeHandle"
            @current-change="currentChange" :current-page="queryParams.pageNo">
          </el-pagination>
        </section>
      </section>
        <section class="t_review-page">
          <div class="nav-com">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
              <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ name: 'hire' }">
                招聘专区
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: #3d6cb0">{{ $route.meta.title || "--" }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 公司基本信息  -->
          <div class="company-info">
            <img class="logo" v-if="companyInfo.companyLogo" :src="companyInfo.companyLogo" v-imgError alt="logo" />
            <img v-else class="logo" src="../../assets/images/logo_demo.png" v-imgError alt="logo" />
            <div class="right-block">
              <div class="name">{{ companyInfo.companyName }}</div>
              <div class="area">
                {{ companyInfo.industry }}
                <div class="collectStatus" @click="changeCollectStatus">
                  <img src="../../assets/images/collection.png" v-if="!collectStatus" />
                  <img src="../../assets/images/collection_active.png" v-else />
                  <span v-if="!collectStatus">收藏</span>
                  <span v-else style="color: #fc9c21">收藏中</span>
                </div>
              </div>
            </div>
            <div class="right-hire">
              <div class="hire-num">{{ companyInfo.recruitmentCount || 0 }}</div>
              <div class="hire-title">在招职位</div>
              <div class="btn" @click="linkTo('resumeEdit')">
                <span class="edit-icon"></span>
                {{ curriculumId ? "修改简历" : "填写简历" }}
              </div>
              <div class="click-num">点击量：{{ companyInfo.clickCount || 0 }}</div>
            </div>
            <div class="tag">
              <span :class="['item', { current: tagType === 0 }]" @click="tagType = 0">企业介绍</span>
              <span :class="['item', { current: tagType === 1 }]" @click="tagType = 1">在招职位</span>
            </div>
          </div>
          <div class="t_btn" @click="linkTo('resumeEdit')">
            <span class="edit-icon"></span>
            {{ curriculumId ? "修改简历" : "填写简历" }}
          </div>
          <section v-show="tagType === 0">
            <!-- 热招职位 -->
            <div class="row-item">
              <div class="title">
                热招职位
                <div class="all" @click="gotDetail">
                  <span class="all-icon"></span>查看全部职位
                </div>
              </div>
              <div style="display: flex; overflow-x: scroll;" v-if="Array.isArray(shortJobList) && shortJobList.length">
                <div style="" v-for="(item, index) in shortJobList" :key="index">
                  <div class="job-item" @click="linkToJobDetail(item.id)">
                    <div class="row1">
                      <div class="job-name">
                        {{ item.jobName }}
                      </div>
                      <div class="salary">
                        {{ item.lowestSalary + "-" + item.highestSalary }}元/天
                      </div>
                    </div>
                    <div class="other">
                      <span>{{ item.workPeriod }} </span>
                      <span class="line"></span>
                      <span>{{ item.practicePeriod }}个月 </span>
                      <span class="line"></span>
                      <span>{{ item.education }} </span>
                      <span class="line"></span>
                      <span>{{ ["在校", "应届"][item.identify] }}</span>
                      <span class="line"></span>
                      <span>{{ item.city }} </span>
                    </div>
                  </div>
                </div>
              </div>
              <el-empty description="暂无数据" v-else></el-empty>
            </div>
            <!-- 平台简介 -->
            <div class="row-item">
              <div class="title">{{ companyInfo.companyName }}简介</div>
              <div class="company-desc" v-if="companyInfo.introduction"
                v-html="companyInfo.introduction.replace(/\n/gm, '<br>')"></div>
              <el-empty description="暂无数据" v-else></el-empty>
            </div>
            <!-- 企业环境 -->
            <div class="row-item">
              <div class="title">企业环境</div>
              <div class="company-environment swiper" id="mySwiper" v-if="Array.isArray(imgVideoList) && imgVideoList.length">

                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item, index) in imgVideoList" :key="index">
                    <div class="t_swiper_item" style=" ">
                      <el-image class="t_swiper_img" :src="item.url" @click="setImagePreview(imgVideoList, item.url)" alt="" v-if="item.type == 'img'"
                        :preview-src-list="imgList.src" fit="cover" style="" />
                      <vueVideoPlayer v-else :src="item.url" :playbackRates="[]" :ref="`video${index}`" :controlBar="controlBar"  @onPlay="videoPlay(index)" />
                      <div v-if="item.updateTime" style=" text-align: right; font-size: 12px; color: #9597a0; margin-bottom: 20px;
                          ">
                        更新时间：{{ item.updateTime }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-button-prev" @click.stop="slidePrev"></div>
                <div class="swiper-button-next" @click.stop="slideNext"></div>
              </div>
              <el-empty description="暂无数据" v-else></el-empty>
            </div>
            <!-- 企业地址 -->
            <div class="row-item">
              <div class="title">企业地址</div>
              <div class="company-address" v-if="
                companyInfo.companyAddress &&
                companyInfo.companyAddress.length > 0
              ">
                <div class="item" :key="index" v-for="(item, index) in companyInfo.companyAddress">
                  <span class="position-icon"></span>
                  {{ item.province !== item.city ? item.province : "" }}
                  {{ item.city }}
                  {{ item.address }}
                </div>
              </div>
              <el-empty description="暂无数据" v-else></el-empty>
            </div>
          </section>
          <section v-show="tagType === 1">
            <!-- 搜索工作栏 -->
            <el-form style="margin: 22px 0 0" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
              <el-form-item prop="status">
                <i class="condition-icon"></i>
                <el-cascader size="mini" v-model="queryParams.city" :show-all-levels="false" :options="provinceAndCityData"
                  :props="{ value: 'label' }" placeholder="工作城市"></el-cascader>
              </el-form-item>
              <el-form-item prop="companyName">
                <el-select size="mini" v-model="queryParams.studentType" placeholder="招聘对象" clearable>
                  <el-option v-for="dict in studentType" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item prop="status">
                <el-select size="mini" v-model="queryParams.education" placeholder="学历要求" clearable>
                  <el-option v-for="dict in educationOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="danger" @click="resetQuery">重置</el-button>
                <el-button size="mini" type="primary" @click="handleQuery">搜索</el-button>
              </el-form-item>
            </el-form>
            <section class="job-list">
              <el-empty description="暂无相关职位" v-if="jobList.length <= 0"></el-empty>
              <div class="item" :key="index" @click="linkToJobDetail(item.id)" v-for="(item, index) in jobList">
                <div class="job-name">
                  {{ item.jobName }} <span class="city">{{ item.city }}</span>
                </div>
                <div class="other">
                  {{ item.workPeriod }} <span class="line"></span>
                  {{ item.practicePeriod }}个月<span class="line"></span>
                  {{ item.lowestSalary + "-" + item.highestSalary }}元/天
                  <span class="line" v-if="item.education"></span>
                  {{ item.education ? item.education : "" }}
                  <span class="line" v-if="item.identify"></span>
                  {{ item.identify ? ["在校", "应届"][item.identify] : "" }}
                </div>
                <div class="btn">职位详情</div>
              </div>
            </section>
            <!-- 分页组件 -->
            <el-pagination v-if="total > 0" class="bottom-page" background layout="prev, pager, next" :total="total"
              :page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 40, 50]" @size-change="pagesizeHandle"
              @current-change="currentChange" :current-page="queryParams.pageNo">
            </el-pagination>
          </section>
        </section>
    </PageCom>

  </div>
</template>

<script>
import {
  provinceAndCityData,
  studentType,
  educationOptions,
  getEducationName,
  getWorkPeriodName,
} from "@/utils/frontDataDict.js";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import PageCom from "@/components/page/index.vue";
import {
  getCompanyInfo,
  getJobListOld,
  isCollectCompany,
  createOrUpdateCollectCompany,
} from "../../request/api";
import vueVideoPlayer from "./components/videoPlayer.vue";
import { deepClone } from "../../utils";
import { mapState } from "vuex";

import { ImagePreview } from 'vant';
export default {
  name: "pcReview",
  data() {
    return {
      provinceAndCityData,
      studentType,
      educationOptions,
      total: 0,
      tagType: 0,
      swiper: null,
      companyInfo: {},
      jobList: [],
      shortJobList: [],
      imgList: [],
      imgVideoList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        education: "",
        studentType: "",
        city: "",
      },
      collectStatus: false,
      controlBar: {
        timeDivider: false, // 当前时间和持续时间的分隔符
        durationDisplay: true, // 时长显示
        remainingTimeDisplay: false, // 剩下时间
        currentTimeDisplay: false, // 当前时间
        volumeControl: false, // 声音控制键
        playToggle: true, // 暂停和播放键
        progressControl: true, // 进度条
        fullscreenToggle: true, // 全屏按钮
      }
    };
  },
  components: {
    PageCom,
    vueVideoPlayer,
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState(["curriculumId", "USER_INFO"]),
  },
  methods: {
    setImagePreview(data, url) {
      console.log(data, 'setImagePreview')
      let urls = data.filter(item => item.type == 'img').map(i => i.url)
       let myindex = '' 
      urls.filter((item, index) => {
        if (item == url) {
           myindex = index
          return {
            item
          }
        }
        
      })
      console.log(urls)
      ImagePreview(urls, myindex)
    },
    videoPlay(index) {
      let videoItem = this.$refs[`video${index}`][0];
      videoItem &&
        this.imgVideoList.map((item, inx) => {
          if (item.type === "video" && inx !== index) {
            this.$refs[`video${inx}`][0].pause();
          }
        });
    },
    changeCollectStatus() {
      let id =
        this.$route.query?.id;
      createOrUpdateCollectCompany({
        status: this.collectStatus ? "0" : "1",
        companyId: id,
        city: this.companyInfo.companyAddress[0].city,
        studentId: this.USER_INFO.id,
      }).then((res) => {
        if (res.data) {
          this.collectStatus = !this.collectStatus;
        }
      });
    },
    pagesizeHandle(val) {
      this.queryParams.pageSize = Number(val);
      this.getJobListFun();
    },
    currentChange(e) {
      this.queryParams.pageNo = Number(e);
      this.getJobListFun();
    },
    gotDetail() {
      localStorage.setItem("currentJobId", this.$store.state.currentJobId);
      this.$router.push({ name: 'companyJobList', params: { id: this.$route.query?.id } });
    },
    init() {
      let id =
        this.$route.query?.id;
      getCompanyInfo({
        id,
      }).then((res) => {
        if (res.data) {
          try {
            if (Array.isArray(JSON.parse(res.data.industry))) {
              res.data.industry = JSON.parse(res.data.industry)[1];
            }
            if (Array.isArray(JSON.parse(res.data.companyAddress))) {
              res.data.companyAddress = JSON.parse(res.data.companyAddress);
            }
            res.data.education = getEducationName(res.data.education);
          } catch {
            () => { };
          }
          try {
            this.imgVideoList = [];
            res.data.environment = JSON.parse(res.data.environment);
            res.data.environment.videoList.forEach((v) => {
              console.log(v);
              v.src &&
                this.imgVideoList.push({
                  type: "video",
                  url: v?.src ?? v,
                  updateTime: v?.updateTime ?? "",
                });
            });
            res.data.environment.imgList.forEach((v) => {
              this.imgVideoList.push({
                type: "img",
                url: v?.src ?? v,
                updateTime: v?.updateTime ?? "",
              });
            });
          } catch {
            () => { };
          }
          this.companyInfo = res.data;
          this.imgList = res.data.environment.imgList;
          setTimeout(() => {
            this.initSwiper();
          });

          isCollectCompany({
            //判断该企业是否被收藏
            companyId: id,
            studentId: this.USER_INFO.id,
          }).then((res) => {
            this.collectStatus = res.data;
          });
        }
      });
      this.getJobListFun();
    },
    getJobListFun() {
      let params = {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        companyId:
          this.$route.query?.id,
      };
      if (this.queryParams.city) {
        params.city = this.queryParams.city[1];
      }
      if (this.queryParams.studentType != "") {
        params.identify = this.studentType[this.queryParams.studentType].value;
      }
      if (this.queryParams.education) {
        params.education = this.queryParams.education;
      }
      getJobListOld(params).then((res) => {
        if (res.data) {
          let { list, total } = res.data;
          list.forEach((v) => {
            v.workPeriod && (v.workPeriod = getWorkPeriodName(v.workPeriod));
            try {
              // 学历
              if (Array.isArray(JSON.parse(v.education))) {
                v.education = getEducationName(v.education, true);
              }
            } catch {
              () => { };
            }
            try {
              if (Array.isArray(JSON.parse(v.city))) {
                v.city = JSON.parse(v.city)[1];
              }
            } catch {
              () => { };
            }
          });
          this.jobList = list;
          // this.shortJobList = list.length > 3 ? list.slice(0, 3) : list;
          let shortJobList = deepClone(list);
          this.shortJobList = shortJobList
            .sort(function (a, b) {
              return b.clickCount - a.clickCount;
            })
            .slice(0, 3);
          this.total = total;
          // if(this.queryParams.pageNo == 1){//只截取第一页的前三条职位数据
          //   this.shortJobList = list.length>=3?list.slice(0, 3):list
          // }
        }
      });
    },
    linkToJobDetail(id) {
      this.$router.push({
        path: `/jobDetail/${id}`,
      });
    },
    linkTo(routeName, id = null) {
      if (id) {
        localStorage.setItem("currentJobId", id);
        this.$router.push({
          name: routeName,
          params: { id, companyId: this.$route.params.id },
        });
      } else {
        this.$router.push({ name: routeName });
      }
    },
    getList(e) {
      this.pageNo = e.page;
      this.getJobListFun();
      console.log("请求页面数据", e);
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        education: "",
        studentType: "",
        city: "",
      }),
        this.handleQuery();
    },
    handleQuery() {
      this.getJobListFun();
    },
    initSwiper() {
      if (this.swiper === null) {
        this.swiper = new Swiper("#mySwiper", {
          slidesPerView: "auto",
          spaceBetween: 25,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      }
    },
    slidePrev() {
      this.swiper.slidePrev();
    },
    slideNext() {
      this.swiper.slideNext();
    },
  },
};
</script>
<style lang="less" scoped>
 .pc_show_page{
    display: block;
  }
  .t_show_page{
    display: none;
  }

  .t_review-page{
    display: none;
  }
.el-image__error,
.el-image__inner,
.el-image__placeholder {
  padding-top: 66.66%;
}

.pc-review-page {
  display: block;
  position: relative;
  background: #fff;

  .t_btn {
    display: none;
  }

  .company-info {
    position: relative;
    height: 212px;
    width: 100%;
    border-bottom: 1px solid #d4d6da;
    padding-bottom: 42px;

    .logo {
      display: block;
      width: 100px;
      height: 100px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #d4d6da;
      float: left;
      margin-right: 30px;
    }

    .right-block {
      position: relative;
      overflow: hidden;
      width: calc(100% - 130px);
      height: 100px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: flex-start;

      .name {
        font-size: 35px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 12px;
      }

      .area {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 30px;
        display: flex;
        align-items: center;

        .collectStatus {
          height: 30px;
          margin-left: 20px;
          display: flex;
          align-items: center;
          cursor: pointer;

          img {
            width: 23px;
            height: 23px;
            margin-right: 3px;
          }

          span {
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
          }
        }
      }
    }

    .right-hire {
      position: absolute;
      top: 0;
      right: 0;
      width: 40%;
      height: 100%;
      padding-top: 8px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: flex-end;

      .hire-num {
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 6px;
        // padding-right: 15px;
      }

      .hire-title {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 22px;
        margin-bottom: 15px;
      }

      .btn {
        width: 146px;
        height: 44px;
        line-height: 44px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #3d6cb0;
        text-align: center;
        border-radius: 34px;
        cursor: pointer;
        margin-bottom: 13px;

        .edit-icon {
          display: inline-block;
          width: 14px;
          height: 16px;
          background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
        }

        &:hover {
          color: #2f8efe;
        }
      }

      .click-num {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 22px;
        // padding-right: 4px;
      }
    }

    .tag {
      position: absolute;
      left: 0;
      bottom: 8px;
      width: 50%;
      height: 30px;
      padding-left: 10px;

      .item {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 24px;
        margin-right: 25px;
        vertical-align: bottom;
        cursor: pointer;
      }

      .item:hover {
        color: #2f8efe;
      }

      .current {
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2f8efe;
        line-height: 24px;
      }
    }
  }

  .row-item {
    position: relative;
    width: 100%;
    padding: 15px 0 15px;
    border-bottom: 1px solid #d4d6da;
    overflow-x: hidden;

    &:last-child {
      border-bottom: 1px solid #fff;
    }

    .title {
      position: relative;
      text-align: left;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 40px;
      margin-bottom: 15px;

      .all {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2f8efe;
        line-height: 40px;
        vertical-align: middle;
        cursor: pointer;

        .all-icon {
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url("../../assets/images/check_all.png") no-repeat center center / cover;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }

    .job-item {
      position: relative;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #d4d6da;
      padding: 15px;
      margin-right: 20px;
      cursor: pointer;

      .row1 {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin-bottom: 15px;

        .job-name {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #37383d;
          line-height: 24px;
          margin-bottom: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .salary {
          width: 140px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 24px;
          text-align: right;
        }
      }

      .other {
        width: 300px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 20px;

        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 8px;
        }
      }

      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

        .job-name {
          color: #2f8efe;
        }
      }
    }

    .company-desc {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 27px;
      word-break: break-all;
    }

    .company-environment {
      width: 100%;
      height: 100%;
      position: relative;

      .swiper-slide {
        width: 500px;
        height: 300px;
        text-align: center;
        font-size: 16px;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: hidden;

        .t_swiper_item {
          width: 500px;

          .t_swiper_img {
            width: 500px;
          }
        }
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: cover;
        padding-top: 66.66% !important;
      }

      .swiper-slide .video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-button-next {
        position: absolute;
        right: -50px;
        top: 50%;
        margin: 0;
        transform: translateY(-50%) scale(0.8);
        width: 180px;
        height: 180px;
        background: url(../../assets/images/next.png) no-repeat;
        background-position: center;
        background-size: cover;
        cursor: pointer;
        z-index: 5;

        &::after {
          display: none;
        }
      }

      .swiper-button-prev {
        position: absolute;
        left: -50px;
        top: 50%;
        margin: 0;
        transform: translateY(-50%) scale(0.8);
        width: 180px;
        height: 180px;
        background: url(../../assets/images/prev.png) no-repeat;
        background-position: center;
        background-size: cover;
        cursor: pointer;
        z-index: 5;

        &::after {
          display: none;
        }
      }
    }

    .company-address {
      position: relative;

      .item {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        margin-top: 35px;
        line-height: 24px;
        cursor: pointer;

        &:first-child {
          margin-top: 0;
        }

        .position-icon {
          display: inline-block;
          width: 15px;
          height: 20px;
          margin-right: 10px;
          background: url("../../assets/images/position.png") no-repeat center center / cover;
          vertical-align: middle;
        }
      }
    }
  }

  .condition-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../../assets/images/condition.png") no-repeat center center / cover;
    vertical-align: middle;
    margin-right: 10px;
  }

  .job-list {
    position: relative;

    .item {
      position: relative;
      width: 100%;
      margin-bottom: 15px;
      border-radius: 10px;
      padding: 25px 0 36px 25px;
      border: 1px solid #d4d6da;
      overflow: hidden;

      &::before {
        content: "";
        display: block;
        width: 10px;
        height: 100%;
        background: #4677b9;
        position: absolute;
        top: 0;
        left: 0;
      }

      .job-name {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 36px;
        margin-bottom: 15px;

        .city {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;
          vertical-align: bottom;
          margin-left: 15px;
        }
      }

      .other {
        width: 280;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 30px;

        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 10px;
        }
      }

      .btn {
        position: absolute;
        width: 122px;
        height: 42px;
        line-height: 42px;
        background: #4677b9;
        border-radius: 4px;
        right: 30px;
        top: 50%;
        margin-top: -20px;
        text-align: center;
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        cursor: pointer;
      }

      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

        .job-name {
          color: #2f8efe;
          cursor: pointer;
        }
      }
    }
  }
}

.bottom-page {
  margin-top: 20px;
  text-align: center;
}

/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}

.el-button--danger {
  width: 64px;
  height: 40px;
  font-size: 15px;
  border: none;
  background: #fff;
  color: #3d6cb0;
}

.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  border: none;
  font-weight: 500;
}

@media screen and (max-width: 480px) {
  .t_show_page{
    display: block;
  }
  .pc-review-page {
    display: none;
  }
  .t_review-page {
    display: block;
    position: relative;
    background: #fff;
    .nav-com{
      display: none;
    }
    .t_btn {
      width: 100%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background: #3d6cb0;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
      margin-bottom: 13px;

      .edit-icon {
        display: inline-block;
        width: 14px;
        height: 16px;
        background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
      }

      &:hover {
        color: #2f8efe;
      }
    }

    .company-info {
      position: relative;
      height: 99px;
      width: 100%;
      border-bottom: 1px solid #d4d6da;
      padding-bottom: 0;

      .logo {
        display: block;
        width: 63px;
        height: 63px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #d4d6da;
        float: left;
        margin-right: 14px;
      }

      .right-block {
        position: relative;
        overflow: hidden;
        width: calc(100% - 130px);
        height: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;

        .name {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #37383d;
          line-height: 30px;
          margin-bottom: 5px;
        }

        .area {
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 21px;
          display: flex;
          align-items: center;

          .collectStatus {
            height: 30px;
            margin-left: 20px;
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
              width: 15px;
              height: 15px;
              margin-right: 5px;
            }

            span {
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0;
            }
          }
        }
      }

      .right-hire {
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        padding-top: 8px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-end;

        .hire-num {
          font-size: 20px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #37383d;
          line-height: 28px;
          margin-bottom: 6px;
          // padding-right: 15px;
        }

        .hire-title {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 17px;
          margin-bottom: 15px;
        }

        .btn {
          display: none;
          width: 146px;
          height: 44px;
          line-height: 44px;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          background: #3d6cb0;
          text-align: center;
          border-radius: 34px;
          cursor: pointer;
          margin-bottom: 13px;

          .edit-icon {
            display: inline-block;
            width: 14px;
            height: 16px;
            background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
          }

          &:hover {
            color: #2f8efe;
          }
        }

        .click-num {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 14px;
          // padding-right: 4px;
        }
      }

      .tag {
        display: none;
        position: absolute;
        left: 0;
        bottom: 8px;
        width: 50%;
        height: 30px;
        padding-left: 10px;

        .item {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 24px;
          margin-right: 25px;
          vertical-align: bottom;
          cursor: pointer;
        }

        .item:hover {
          color: #2f8efe;
        }

        .current {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #2f8efe;
          line-height: 24px;
        }
      }
    }

    .row-item {
      position: relative;
      width: 100%;
      padding: 15px 0 15px;
      border-bottom: 1px solid #d4d6da;
      overflow-x: hidden;

      &:last-child {
        border-bottom: 1px solid #fff;
      }

      .title {
        position: relative;
        text-align: left;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 22px;
        margin-bottom: 15px;

        .all {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #9597A0;
          line-height: 17px;
          vertical-align: middle;
          margin-right: 10px;
          cursor: pointer;

          .all-icon {
            display: inline-block;
            width: 9px;
            height: 18px;
            background: url("../../assets/images/more.png") no-repeat center center / cover;
            vertical-align: top;
            margin-right: -90px;
          }
        }
      }

      .job-item {
        width:3.25rem;
        position: relative;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #d4d6da;
        padding: 15px;
        margin-right: 20px;
        cursor: pointer;

        .row1 {
          position: relative;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          margin-bottom: 15px;

          .job-name {
            width: 1.55rem;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #37383d;
            line-height: 24px;
            margin-bottom: 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .salary {
            width: auto;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 24px;
            text-align: right;
          }
        }

        .other {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 20px;

          .line {
            position: relative;
            display: inline-block;
            width: 1px;
            height: 14px;
            background: #9597a0;
            margin: 0 8px;
          }
        }

        &:hover {
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

          .job-name {
            color: #2f8efe;
          }
        }
      }

      .company-desc {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 25px;
        word-break: break-all;
      }

      .company-environment {
        width: 100%;
        height: 100%;
        position: relative;
        overflow-x: scroll;
        .swiper-button-prev {
          display: none;
        }

        .swiper-button-next {
          display: none;
        }

        .swiper-slide {
          width: 250px;
          height: 135px;
          text-align: center;
          font-size: 16px;
          background: #fff;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          overflow: hidden;
          margin-right: 10px !important;

          .t_swiper_item {
            width: 250px;

            .t_swiper_img {
              width: 250px;
              height: 135px;
            }
          }
        }

        .swiper-slide img {
          display: block;
          width: 100%;
          object-fit: cover;
          padding-top: 66.66% !important;
        }

        .swiper-slide .video {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .swiper-button-next {
          position: absolute;
          right: -50px;
          top: 50%;
          margin: 0;
          transform: translateY(-50%) scale(0.8);
          width: 180px;
          height: 180px;
          background: url(../../assets/images/next.png) no-repeat;
          background-position: center;
          background-size: cover;
          cursor: pointer;
          z-index: 5;

          &::after {
            display: none;
          }
        }

        .swiper-button-prev {
          position: absolute;
          left: -50px;
          top: 50%;
          margin: 0;
          transform: translateY(-50%) scale(0.8);
          width: 180px;
          height: 180px;
          background: url(../../assets/images/prev.png) no-repeat;
          background-position: center;
          background-size: cover;
          cursor: pointer;
          z-index: 5;

          &::after {
            display: none;
          }
        }
      }

      .company-address {
        position: relative;

        .item {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          margin-top: 15px;
          line-height: 20px;
          cursor: pointer;

          &:first-child {
            margin-top: 0;
          }

          .position-icon {
            position: relative;
            top: -2px;
            display: inline-block;
            width: 12px;
            height: 14px;
            margin-left: 3px;
            margin-right: 10px;
            background: url("../../assets/images/position.png") no-repeat center center / cover;
            vertical-align: middle;
          }
        }
      }
    }

    .condition-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url("../../assets/images/condition.png") no-repeat center center / cover;
      vertical-align: middle;
      margin-right: 10px;
    }

    .job-list {
      position: relative;

      .item {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        border-radius: 10px;
        padding: 25px 0 36px 25px;
        border: 1px solid #d4d6da;
        overflow: hidden;

        &::before {
          content: "";
          display: block;
          width: 10px;
          height: 100%;
          background: #4677b9;
          position: absolute;
          top: 0;
          left: 0;
        }

        .job-name {
          font-size: 22px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #37383d;
          line-height: 36px;
          margin-bottom: 15px;

          .city {
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 30px;
            vertical-align: bottom;
            margin-left: 15px;
          }
        }

        .other {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;

          .line {
            position: relative;
            display: inline-block;
            width: 1px;
            height: 14px;
            background: #9597a0;
            margin: 0 10px;
          }
        }

        .btn {
          position: absolute;
          width: 122px;
          height: 42px;
          line-height: 42px;
          background: #4677b9;
          border-radius: 4px;
          right: 30px;
          top: 50%;
          margin-top: -20px;
          text-align: center;
          font-size: 17px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          cursor: pointer;
        }

        &:hover {
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

          .job-name {
            color: #2f8efe;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
